<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>Play Test</title>
    <link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
</head>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        background: #000;
    }
</style>
<body>
<div id="iframe"></div>
<script type="text/javascript">
    let player;
    let videoRawUrl = '';
    let videoProxyUrl = '';
    let videoFormat = 'normal';
    let currentTime = 0;
    let errorFlag = 0;  // 0: reload, 1: proxy
    let errorCount = 0;

    function getVideoInfo() {
        let http = new XMLHttpRequest();
        http.onload = function () {
            let data = JSON.parse(this.response);
            console.log(data);
            videoRawUrl = data["raw_url"];
            videoProxyUrl = data["proxy_url"];
            videoFormat = data["format"];
        };
        http.open("GET", "{{ info_url }}", false);
        http.send();
    }

    function initPlayer() {
        player = new DPlayer({
            container: document.getElementById('iframe'),
            video: {
                quality: [
                    {
                        name: 'Raw',
                        url: videoRawUrl,
                        type: videoFormat,
                        autoplay: true,
                        preload: true
                    },
                    {
                        name: 'Proxy',
                        url: videoProxyUrl,
                        type: videoFormat,
                        autoplay: true,
                        preload: true
                    },
                ],
                defaultQuality: 0
            }
        });

        player.on('canplay', function () {
            player.play();
        });

        player.on("error", function () {
            errorCount++;
            if (errorCount > 3) {
                console.error('Maybe resource not available');
                return;
            }

            console.log(`errorFlag: ${errorFlag}, errorCount: ${errorCount}`);
            let currentTime_ = player.video.currentTime;
            if (currentTime_ !== 0)
                currentTime = currentTime_;
            console.log(`currentTime: ${currentTime}`);

            if (errorFlag === 0) {
                console.log(`Try to reload url from: ${videoRawUrl}`);
                player.switchVideo({url: videoRawUrl}, null);
                errorFlag = 1;
            } else if (errorFlag === 1) {
                console.log(`Try to use proxy: ${videoProxyUrl}`);
                player.switchVideo({url: videoProxyUrl}, null);
            }
            player.video.currentTime = currentTime;
            console.log(`recovery currentTime: ${currentTime}`);
        });

        player.on('loadeddata', function () {
            if (errorFlag === 1) {
                errorFlag = 0;
                console.log('load success, clear errorFlag.')
            }
        });

    }

    getVideoInfo();
    initPlayer();
</script>
</body>
</html>